<template>
  <div class="vm-examine-approved" ref="warpper">
    <div class="content">
      <mt-loadmore
        :top-method="loadTop"
        :bottom-method="loadBottom"
        :bottom-all-loaded="allLoaded"
        :autoFill="false"
        ref="loadmore">
        <ul>
          <router-link :to="'/common_details/'+ item.id + '/' + item.objtype + '?type=1&btn=examinePage&objType=' + item.type" tag="li" :class="['vm-examine-approved-item', item.opinion == 1 ? 'agree': 'noagree']" v-for="(item, key) in workFlowListNext" :key="key">
            <div class="examine-approved-h">
              <div class="approved-h-l">
              </div>
              <div class="approved-h-r">
                <p>{{ item.title }}</p>
              </div>
            </div>
            <div class="examine-approved-b">
              <div class="create">
                <span class="createPerson">创建人：{{ item.person }}</span>
                <span class="createTime">创建时间：{{ item.created_time }}</span>
              </div>
              <div class="examineView">
                <span>审批意见：</span>
                <p>{{ item.description }}</p>
              </div>
            </div>
            <div class="examine-approved-f">
              <p class="examineTime">审批时间：{{ item.created_time }}</p>
            </div>
          </router-link>
        </ul>
        <vm-common-noData v-if="!workFlowListNext.length"></vm-common-noData>
      </mt-loadmore>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
import { getWorkflowListNext } from '@/api/examine.js'
export default {
  data () {
    return {
      workFlowListNext: new Array(),
      allLoaded: false,
      workFlowListNextPage: 1
    }
  },
  created () {
    this.getExamineApproved(true);
  },
  mounted () {},
  methods: {
    // 获取我已审批数据
    getExamineApproved (reset, loadmoreType) {
      getWorkflowListNext(this.workFlowListNextPage).then(async res => {
        let result = res.data.data;
        if ( !result.length ) {
          this.allLoaded = true;
        }
        if (reset) {
          this.workFlowListNext = result;
          this.$refs.loadmore.onTopLoaded();
        } else {
          if ( loadmoreType == 'top' ) {
            this.workFlowListNext = result;
            this.$refs.loadmore.onTopLoaded();
          } else {
            this.workFlowListNext = this.workFlowListNext.concat(result);
            this.$refs.loadmore.onBottomLoaded();
          }
        }
      }).catch(err => console.log(err));
    },
    // 上拉刷新
    loadTop () {
      this.workFlowListNextPage = 1;
      this.allLoaded = false;
      this.getExamineApproved(true,'top');
    },
    // 下拉加载
    loadBottom () {
      this.workFlowListNextPage ++;
      this.getExamineApproved(false,'buttom');
    }
  },
  components: {}
}
</script>

<style scoped lang="scss">
.vm-examine-approved {
  width: 100%;
  height: calc( 100% - 80px );
  background-color: #fff;
  overflow: auto;
  .content {
    height: 100%;
  }
  ul {
    display: flex;
    flex-direction: column;
    margin-left: 40px;
    height: 100%;
    li.vm-examine-approved-item {
      &.noagree {
        background: url("../../../static/images/noagree.png") no-repeat;
        background-position: right top;
        background-size: 110px 110px;
      }
      &.agree {
        background: url("../../../static/images/agree.png") no-repeat;
        background-position: right top;
        background-size: 110px 110px;
      }
      display: flex;
      flex-direction: column;
      border-bottom: 1px solid #eeeeee;/* no */
      .examine-approved-h {
        display: flex;
        margin-top: 20px;
        min-height: 95px;
        .approved-h-l {
          display: flex;
          justify-content: flex-start;
          width: 100px;
          background: url("../../../static/images/vm-common-ltem-list.png") no-repeat;
          background-size: 80px 80px;
        }
        .approved-h-r {
          flex: 1;
          padding-right: 140px;
          text-align: left;
          p {
            font-size: 26px;
            font-weight: bold;
            color: #000;
          }
        }
      }
      .examine-approved-b {
        color: #999999;
        display: flex;
        flex-direction: column;
        font-size: 24px;
        padding-right: 85px;
        .create{
          display: flex;
          justify-content: flex-start;
          flex-wrap: wrap;
          min-height: 50px;
          .createPerson {
            margin-right: 28px;
          }
        }
        .examineView {
          display: flex;
          text-align: left;
          min-height: 90px;
          span {
            font-size: 24px;
            width: 130px;
          }
          p {
            font-size: 24px;
            color: #000;
            flex: 1;
          }
        }
      }
      .examine-approved-f {
        display: flex;
        min-height: 50px;
        .examineTime {
          font-size: 24px;
        }
      }
    }
  }
}
</style>
